import React, { PureComponent, createRef } from 'react'
import { CSSTransition } from 'react-transition-group'
import './style.css'

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      isShow: true,
    }

    this.sectionRef = createRef()
  }

  render() {
    const { isShow } = this.state

    return (
      <div>
        <button onClick={(e) => this.setState({ isShow: !this.state.isShow })}>
          显示、隐藏
        </button>

        {/*
           unmountOnExit:当组件退出时，进行卸载, 
           timeout: 控制类是什么时候添加移除，内部的css动画time表示当前动画执行时间，最好保持一致
           nodeRef： 不在使用findNode进行dom查找，dom查找由外部手动引入
        */}
        <CSSTransition
          nodeRef={this.sectionRef}
          appear
          in={isShow}
          classNames="why"
          timeout={2000}
          unmountOnExit={true}
          onEnter={() => console.log('开始进入动画')}
          onEntering={() => console.log('执行进入动画')}
          onEntered={() => console.log('执行进入动画结束')}
          onExit={() => console.log('开始离开动画')}
          onExiting={() => console.log('执行离开动画')}
          onExited={() => console.log('执行离开结束')}
        >
          <section ref={this.sectionRef}>
            <h2>哈哈哈</h2>
            <p>段落段落段落段落</p>
          </section>
        </CSSTransition>
      </div>
    )
  }
}

export default App
